<div class="content">
    <div id="example_title">
        <h1>Popup &amp; Grid</h1>
        Popup with a layout in it. Layout has 2 panels, one with grid another with from.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div style="padding: 20px 0px">
    <button class="w2ui-btn" onclick="openPopup()">Open Popup</button>
</div>

<!--CODE-->
<script type="module">
import { w2layout, w2grid, w2form, w2popup, w2utils } from '__W2UI_PATH__'

// widget configuration
let config = {
    layout: {
        name: 'layout',
        padding: 4,
        panels: [
            { type: 'left', size: '50%', resizable: true, minSize: 300 },
            { type: 'main', minSize: 300, style: 'overflow: hidden' }
        ]
    },
    grid: {
        name: 'grid',
        style: 'border: 1px solid #efefef',
        columns: [
            { field: 'fname', text: 'First Name', size: '33%', sortable: true, searchable: true },
            { field: 'lname', text: 'Last Name', size: '33%', sortable: true, searchable: true },
            { field: 'email', text: 'Email', size: '33%' },
            { field: 'sdate', text: 'Start Date', size: '120px', render: 'date' }
        ],
        records: [
            { recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
            { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
        ],
        async onClick(event) {
            await event.complete // needs to wait for evnet complete cycle, so selection is right
            let sel = grid.getSelection()
            if (sel.length == 1) {
                form.recid  = sel[0]
                form.record = w2utils.clone(grid.get(sel[0]))
                form.refresh()
            } else {
                form.clear()
            }
        }
    },
    form: {
        header: 'Edit Record',
        name: 'form',
        style: 'border: 1px solid #efefef',
        fields: [
            { field: 'recid', type: 'text', html: { label: 'ID', attr: 'size="10" readonly' } },
            { field: 'fname', type: 'text', required: true, html: { label: 'First Name', attr: 'size="40" maxlength="40"' } },
            { field: 'lname', type: 'text', required: true, html: { label: 'Last Name', attr: 'size="40" maxlength="40"' } },
            { field: 'email', type: 'email', html: { label: 'Email', attr: 'size="30"' } },
            { field: 'sdate', type: 'date', html: { label: 'Date', attr: 'size="10"' } }
        ],
        actions: {
            Reset() {
                this.clear()
            },
            Save() {
                let errors = this.validate()
                if (errors.length > 0) return
                if (this.recid == 0) {
                    grid.add(w2utils.extend({ recid: grid.records.length + 1 }, this.record))
                    grid.selectNone()
                    this.clear()
                } else {
                    grid.set(this.recid, this.record)
                    grid.selectNone()
                    this.clear()
                }
            }
        }
    }
}

// initialization in memory
let layout = new w2layout(config.layout)
let grid = new w2grid(config.grid)
let form = new w2form(config.form)

window.openPopup = function() {
    w2popup.open({
        title: 'Popup',
        width: 900,
        height: 600,
        showMax: true,
        body: '<div id="main" style="position: absolute; left: 2px; right: 2px; top: 0px; bottom: 3px;"></div>'
    })
    .then(e => {
        layout.render('#w2ui-popup #main')
        layout.html('left', grid)
        layout.html('main', form)
    })
}
</script>
